<template>
  <div id="UserPermission">
    <el-row>
      <el-col :span="24">
        <el-row>
          <el-col :span="4">
            <div class="div_border_title">
              <h2>用户权限</h2>
            </div>
          </el-col>
        </el-row>
        <div class="search-box">
          <el-form inline>
            <el-form-item label="电话号码">
              <el-input v-model="searchData.tel"></el-input>
            </el-form-item>
            <el-form-item label="身份证号码">
              <el-input v-model="searchData.id_card"></el-input>
            </el-form-item>
            <el-form-item label="邮件地址">
              <el-input v-model="searchData.email"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="doSearch" icon="search">{{ $t('Search') }}</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
      <el-col :span="24" style="margin-top:20px;">
        <div class="div_title">用户管理</div>
      </el-col>
    </el-row>
    <el-table :data="userList" border highlight-current-row fit>
      <el-table-column type="index" :label="$t('index')" width="100" align="center"></el-table-column>
      <el-table-column prop="tel" label="电话号码" align="center" width="180"></el-table-column>
      <el-table-column :label="items.subsys_name"
                       v-for="(items,index) in subsysData" :key="index" align="center">
        <template slot-scope="scope">
          <el-button @click.native.prevent="editRow(scope.$index, items.id,items.subsys_name)" type="text"
                     size="small">
            设置用户组
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @current-change="handleCurrentChange" layout="total, prev, pager, next" :total="total"
                   :page-size="pageSize" class="table-page-style"></el-pagination>

    <el-dialog :title="dialogTitle" v-model="dialogVisible" size="tiny">
      <div id="div_tree">
        <el-radio-group v-model="selectedRole">
          <el-radio v-for="(items,index) in roleData" :label="items.id" :key="index" size="large">{{items.role_name}}
          </el-radio>
        </el-radio-group>
        <div>
          <el-button @click="saveRole()" type="text">
            保存
          </el-button>
          <el-button @click="cancelSave()" type="text">
            取消
          </el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { postDataToServer } from '../../assets/js/post.js'
  import { getStaticMapList } from '../../assets/js/GlobeDefine.js'
  import { getToolBarList } from '../../assets/js/buildStructure/list.js'

  export default {
    name: 'UserPermission',
    data () {
      return {
        userList: [],
        page_no: 1,
        toolbarList: [],
        total: 0,
        userID: '',
        pageSize: 0,
        subsysData: [],
        selectedRole: '',
        selectedRoleID: '',
        roleData: [],
        dialogVisible: false,
        dialogTitle: '',
        selectSysID: '',
        searchData: {
          tel: '',
          id_card: '',
          email: '',
        }
      }
    },
    created () {
      this.freshComponent()
    },
    methods: {
      doSearch () {
        this.getUserList(1)
      },
      freshComponent () {
        this.getUserList(1)
        this.getSubsysList()
      },
      handleCurrentChange (pageNum) {
        this.page_no = pageNum
      },
      editRow (index, sysID, sysName) {
        this.dialogVisible = true
        this.dialogTitle = '设置' + sysName + '角色'
        this.userID = this.userList[index].id
        this.selectSysID = sysID
        this.getRoleList(sysID)
        this.getUserRole(this.userID, sysID)
      },
      saveRole () {
        var _this = this
        let param = new Object()
        param.role_ids = this.selectedRole
        param.user_id = this.userID
        param.subsys_id = this.selectSysID
        postDataToServer('ROLE_ADDUSER', param).then((data) => {
          if (data.status !== 0) {
            this.$message({
              message: data.message,
              type: 'error'
            })
          } else {
            commonNotify(_this, 0, 'SAVE')
            this.dialogVisible = false
          }
        }).catch((error) => {
          commonNotify(_this, 1, 'SAVE')
        })
      },
      cancelSave () {
        this.dialogVisible = false
      },
      getRoleList (sysid) {
        let _this = this
        let param = new Object()
        param.subsys_id = sysid
        postDataToServer('ROLE_LISTALL', param).then((data) => {
          _this.roleData = data.data_list
        }).catch((error) => {
          commonNotify(_this, 1, 'GET')
        })
      },
      getSubsysList () {
        let _this = this
        let param = new Object()
        postDataToServer('SUBSYS_LISTALL', param)
          .then((data) => {
            data.data_list.forEach((item) => {
              if (item.subsys_name === '人才中心' || item.subsys_name === '人才交流' || item.subsys_name === '人才服务') {
                _this.subsysData.push(item)
              }
            })
          }).catch((error) => {
          commonNotify(_this, 1, 'GET')
        })
      },
      getUserList (pageNum) {
        let _this = this
        let params = new Object()
        params.page_no = this.page_no
        params.page_size = 10
        let s
        for (s in this.searchData) {
          if (this.searchData[s] !== '') {
            params[s] = this.searchData[s]
          }
        }
        postDataToServer('ACCOUT_LIST', params).then((data) => {
          _this.userList = data.data_list
          _this.total = data.total_results
          _this.pageSize = data.page_size
          if (data.status !== 0) {
            commonNotify(_this, 1, 'GET')
          }
        }).catch((error) => {
          commonNotify(_this, 1, 'GET')
        })
      },
      getUserRole (userID, sysID) {
        let _this = this
        let param = new Object()
        param.id = userID
        param.subsys_id = sysID
        postDataToServer('ROLE_USER_ROLE', param)
          .then((data) => {
            if (data.data_list.length == 0) {
              return
            }
            _this.selectedRole = data.data_list[0].id
          }).catch((error) => {
          commonNotify(_this, 1, 'GET')
        })
      },
    },
    watch: {
      page_no: function (val, oldVal) {
        this.getUserList(val)
      }
    }
  }
</script>

<style scoped>
  #UserPermission {
    padding: 2em;
  }

  .toolbar-box {
    border: 1px solid #20A0FF;
    background-color: #20A0FF;
  }
</style>
